<template>
  <view class="profile-page">
    <!-- 顶部用户信息区域 -->
    <view class="header-section">
      <view class="user-profile">
        <view class="avatar-wrapper">
          <text class="avatar-text">{{ userInfo?.name?.slice(-2) || 'U' }}</text>
        </view>
        <view class="user-detail">
          <text class="user-name">{{ userInfo?.name || '未登录' }}</text>
          <view class="user-tags">
            <text class="tag-item">{{ userInfo?.department || '暂无部门' }}</text>
            <text class="tag-dot">·</text>
            <text class="tag-item">{{ userInfo?.job || '工作人员' }}</text>
          </view>
        </view>
        <!-- <view class="settings-btn" @click="navigateTo('/pages/settings/settings')">
          <u-icon name="setting" color="#ffffff" size="24"></u-icon>
        </view> -->
      </view>
    </view>

    <!-- 功能菜单 -->
    <view class="menu-container">
      <!-- 账户安全组 -->
      <view class="menu-group">
        <view class="group-title">账户安全</view>
        <view class="menu-list">
          <view class="menu-item" @click="showPasswordDialog = true">
            <view class="menu-icon password-icon">
              <u-icon name="lock" color="#ffffff" size="26"></u-icon>
            </view>
            <view class="menu-content">
              <text class="menu-title">修改密码</text>
              <text class="menu-desc">定期修改密码保护账户安全</text>
            </view>
            <text class="menu-arrow">›</text>
          </view>
        </view>
      </view>

      <!-- 其他功能组 -->
      <view class="menu-group">
        <view class="group-title">其他</view>
        <view class="menu-list">
          <view class="menu-item" @click="showHelpFeedback">
            <view class="menu-icon help-icon">
              <u-icon name="chat" color="#ffffff" size="26"></u-icon>
            </view>
            <view class="menu-content">
              <text class="menu-title">帮助与反馈</text>
              <text class="menu-desc">联系我们获取帮助</text>
            </view>
            <text class="menu-arrow">›</text>
          </view>
          <view class="menu-item" @click="clearCache">
            <view class="menu-icon cache-icon">
              <u-icon name="trash" color="#ffffff" size="26"></u-icon>
            </view>
            <view class="menu-content">
              <text class="menu-title">清除缓存</text>
              <text class="menu-desc">清理应用缓存数据</text>
            </view>
            <text class="menu-arrow">›</text>
          </view>
          <view class="menu-item" @click="showPrivacyPolicy">
            <view class="menu-icon privacy-icon">
              <u-icon name="file-text" color="#ffffff" size="26"></u-icon>
            </view>
            <view class="menu-content">
              <text class="menu-title">隐私政策</text>
              <text class="menu-desc">了解我们如何保护您的隐私</text>
            </view>
            <text class="menu-arrow">›</text>
          </view>
          <view class="menu-item" @click="showAbout">
            <view class="menu-icon info-icon">
              <u-icon name="question" color="#ffffff" size="26"></u-icon>
            </view>
            <view class="menu-content">
              <text class="menu-title">关于系统</text>
              <text class="menu-desc">v1.0.0</text>
            </view>
            <text class="menu-arrow">›</text>
          </view>
        </view>
      </view>

      <!-- 退出登录 -->
      <view class="logout-container">
        <view class="logout-btn" @click="handleLogout">
          <text class="logout-text">退出登录</text>
        </view>
      </view>

      <!-- 底部版权 -->
      <view class="footer">
        <text class="footer-text">阳泉市卫生健康委员会</text>
        <text class="footer-year">© 2025</text>
      </view>
    </view>

    <!-- 修改密码弹窗 -->
    <u-popup
      v-model:show="showPasswordDialog"
      mode="center"
      :round="20"
      :closeable="true"
      :closeOnClickOverlay="false"
    >
      <view class="password-popup-content">
        <text class="popup-title">修改密码</text>
        <view class="form-container">
          <view class="form-item">
            <text class="form-label">当前密码</text>
            <input
              class="form-input"
              v-model="passwordForm.oldPassword"
              type="password"
              placeholder="请输入当前密码"
              password
            />
          </view>
          <view class="form-item">
            <text class="form-label">新密码</text>
            <input
              class="form-input"
              v-model="passwordForm.newPassword"
              type="password"
              placeholder="请输入新密码（6-20位）"
              password
            />
          </view>
          <view class="form-item">
            <text class="form-label">确认新密码</text>
            <input
              class="form-input"
              v-model="passwordForm.confirmPassword"
              type="password"
              placeholder="请再次输入新密码"
              password
            />
          </view>
        </view>
        <view class="popup-actions">
          <view class="action-btn cancel" @click="cancelPasswordChange">
            <text>取消</text>
          </view>
          <view class="action-btn confirm" @click="handlePasswordSubmit">
            <text>确认修改</text>
          </view>
        </view>
      </view>
    </u-popup>

    <!-- 帮助与反馈弹窗 -->
    <u-popup
      v-model:show="helpModalVisible"
      mode="center"
      :round="20"
      :closeable="true"
      :closeOnClickOverlay="true"
    >
      <view class="help-popup-content">
        <text class="popup-title">帮助与反馈</text>
        <view class="help-content">
          <view class="help-section">
            <u-icon name="kefu-ermai" color="#3e7eff" size="24"></u-icon>
            <text class="section-title">技术支持团队</text>
          </view>
          <view class="contact-list">
            <view class="contact-item">
              <view class="contact-label">
                <u-icon name="account" color="#3e7eff" size="20"></u-icon>
                <text>王工</text>
              </view>
              <view class="contact-label">
                <u-icon name="phone" color="#10b981" size="20"></u-icon>
                <text>15003535727</text>
              </view>
            </view>
            <view class="contact-item">
              <view class="contact-label">
                <u-icon name="account" color="#3e7eff" size="20"></u-icon>
                <text>吴工</text>
              </view>
              <view class="contact-label">
                <u-icon name="phone" color="#10b981" size="20"></u-icon>
                <text>13521982586</text>
              </view>
            </view>
          </view>
          <view class="help-tips">
            <text class="tips-text">💡 遇到问题请及时联系我们，我们将竭诚为您服务</text>
          </view>
        </view>
        <view class="popup-single-btn" @click="helpModalVisible = false">
          <text>我知道了</text>
        </view>
      </view>
    </u-popup>

    <!-- 隐私政策弹窗 -->
    <u-popup
      v-model:show="privacyModalVisible"
      mode="center"
      :round="20"
      :closeable="true"
      :closeOnClickOverlay="true"
    >
      <view class="privacy-popup-content">
        <text class="popup-title">隐私政策</text>
        <scroll-view class="privacy-content" scroll-y>
          <text class="privacy-text"
            >阳泉市卫生健康委员会文件流转系统（以下简称"本系统"）尊重并保护所有使用服务用户的个人隐私权。
            一、信息收集和使用 我们收集信息是为了向您提供更好的服务。我们收集的信息类型包括： 1.
            您提供的信息：用户名、姓名、部门、职位等基本信息 2.
            系统自动收集的信息：登录日志、操作记录等 二、信息安全
            我们采取适当的安全措施来保护您的个人信息，防止数据丢失、不当使用、未经授权访问或披露。
            三、信息披露 除法律法规规定的情形外，我们不会向第三方披露您的个人信息。 四、政策更新
            我们可能会不时更新本隐私政策。更新后的政策将在系统内公布。
            如有任何问题，请联系系统管理员。</text
          >
        </scroll-view>
        <view class="popup-single-btn" @click="privacyModalVisible = false">
          <text>我知道了</text>
        </view>
      </view>
    </u-popup>

    <!-- 关于系统弹窗 -->
    <u-popup
      v-model:show="aboutModalVisible"
      mode="center"
      :round="20"
      :closeable="true"
      :closeOnClickOverlay="true"
    >
      <view class="about-popup-content">
        <view class="about-icon">ℹ️</view>
        <text class="about-title">文件流转系统</text>
        <text class="about-version">v1.0.0</text>
        <view class="about-divider"></view>
        <text class="about-company">阳泉市卫生健康委员会</text>
        <text class="about-copyright">© 2025 All Rights Reserved</text>
        <view class="about-btn" @click="aboutModalVisible = false">
          <text class="btn-text">知道了</text>
        </view>
      </view>
    </u-popup>

    <!-- 自定义TabBar -->
    <CustomTabBar />
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, reactive } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { UserManager } from '@/utils/user'
import CustomTabBar from '@/custom-tab-bar/index.vue'

// 用户信息
const userInfo = computed(() => {
  return UserManager.getFullUserInfo()
})

// 弹窗显示状态
const showPasswordDialog = ref(false)
const helpModalVisible = ref(false)
const privacyModalVisible = ref(false)
const aboutModalVisible = ref(false)

// 密码表单
const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: '',
})

// 验证密码表单
const validatePasswordForm = (): boolean => {
  if (!passwordForm.oldPassword) {
    uni.showToast({
      title: '请输入当前密码',
      icon: 'none',
    })
    return false
  }

  if (!passwordForm.newPassword) {
    uni.showToast({
      title: '请输入新密码',
      icon: 'none',
    })
    return false
  }

  if (passwordForm.newPassword.length < 6 || passwordForm.newPassword.length > 20) {
    uni.showToast({
      title: '密码长度应在6-20位之间',
      icon: 'none',
    })
    return false
  }

  if (!passwordForm.confirmPassword) {
    uni.showToast({
      title: '请确认新密码',
      icon: 'none',
    })
    return false
  }

  if (passwordForm.newPassword !== passwordForm.confirmPassword) {
    uni.showToast({
      title: '两次输入的密码不一致',
      icon: 'none',
    })
    return false
  }

  return true
}

// 处理密码修改提交
const handlePasswordSubmit = async () => {
  // 验证表单
  if (!validatePasswordForm()) {
    return
  }

  // 确认修改
  uni.showModal({
    title: '确认修改',
    content: '修改密码后需要重新登录，确定要继续吗？',
    confirmText: '确定',
    cancelText: '取消',
    success: async (res) => {
      if (res.confirm) {
        try {
          uni.showLoading({
            title: '提交中...',
          })

          const userId = userInfo.value?.id

          if (!userId) {
            throw new Error('用户ID不存在')
          }

          // 调用API修改密码
          const { updateUserPassword } = await import('@/Api/user')
          await updateUserPassword(userId, {
            oldPassword: passwordForm.oldPassword,
            newPassword: passwordForm.newPassword,
            confirmPassword: passwordForm.confirmPassword,
          })

          uni.hideLoading()

          uni.showToast({
            title: '密码修改成功',
            icon: 'success',
          })

          // 清空表单
          passwordForm.oldPassword = ''
          passwordForm.newPassword = ''
          passwordForm.confirmPassword = ''

          showPasswordDialog.value = false

          // 延迟跳转登录页
          setTimeout(() => {
            // 清除用户信息
            UserManager.clearUserInfo()
            uni.removeStorageSync('token')
            uni.removeStorageSync('refreshToken')

            // 跳转到登录页
            uni.reLaunch({
              url: '/pages/login/login',
            })
          }, 1500)
        } catch (error: any) {
          uni.hideLoading()
          console.error('[修改密码失败]', error)
          uni.showToast({
            title: error.message || '修改密码失败',
            icon: 'none',
          })
        }
      }
    },
  })
}

// 取消修改密码
const cancelPasswordChange = () => {
  // 清空表单
  passwordForm.oldPassword = ''
  passwordForm.newPassword = ''
  passwordForm.confirmPassword = ''
  showPasswordDialog.value = false
}

// 显示帮助与反馈
const showHelpFeedback = () => {
  helpModalVisible.value = true
}

// 拨打电话
const makePhoneCall = () => {
  uni.makePhoneCall({
    phoneNumber: '13521982586',
    success: () => {
      console.log('[拨打电话成功]')
    },
    fail: (err) => {
      console.error('[拨打电话失败]', err)
      uni.showToast({
        title: '拨打电话失败',
        icon: 'none',
      })
    },
  })
}

// 复制电话号码
const copyPhoneNumber = () => {
  uni.setClipboardData({
    data: '13521982586',
    success: () => {
      uni.showToast({
        title: '电话号码已复制',
        icon: 'success',
      })
    },
    fail: () => {
      uni.showToast({
        title: '复制失败',
        icon: 'none',
      })
    },
  })
}

// 清除缓存
const clearCache = () => {
  uni.showModal({
    title: '清除缓存',
    content: '确定要清除应用缓存吗？这将清理临时数据，但不会删除您的登录信息。',
    confirmText: '清除',
    cancelText: '取消',
    success: (res) => {
      if (res.confirm) {
        try {
          uni.showLoading({
            title: '清理中...',
          })

          // 获取当前登录信息
          const token = uni.getStorageSync('token')
          const refreshToken = uni.getStorageSync('refreshToken')
          const currentRoleId = uni.getStorageSync('currentRoleId')

          // 清除所有缓存
          uni.clearStorageSync()

          // 恢复登录信息
          if (token) {
            uni.setStorageSync('token', token)
          }
          if (refreshToken) {
            uni.setStorageSync('refreshToken', refreshToken)
          }
          if (currentRoleId) {
            uni.setStorageSync('currentRoleId', currentRoleId)
          }

          // 恢复用户信息到 Storage
          const currentUserInfo = UserManager.getFullUserInfo()
          if (currentUserInfo) {
            uni.setStorageSync('userInfo', JSON.stringify(currentUserInfo))
          }

          uni.hideLoading()

          uni.showToast({
            title: '缓存清除成功',
            icon: 'success',
          })
        } catch (error) {
          uni.hideLoading()
          console.error('[清除缓存失败]', error)
          uni.showToast({
            title: '清除缓存失败',
            icon: 'none',
          })
        }
      }
    },
  })
}

// 显示隐私政策
const showPrivacyPolicy = () => {
  privacyModalVisible.value = true
}

// 页面跳转
const navigateTo = (url: string) => {
  uni.navigateTo({
    url: url,
    fail: () => {
      uni.showToast({
        title: '页面暂未开发',
        icon: 'none',
      })
    },
  })
}

// 显示关于信息
const showAbout = () => {
  console.log('[点击关于系统]')
  aboutModalVisible.value = true
  console.log('[aboutModalVisible]', aboutModalVisible.value)
}

// 退出登录
const handleLogout = () => {
  uni.showModal({
    title: '退出登录',
    content: '确定要退出登录吗？',
    confirmText: '确定',
    cancelText: '取消',
    success: (res) => {
      if (res.confirm) {
        // 清除用户信息
        UserManager.clearUserInfo()
        uni.removeStorageSync('token')
        uni.removeStorageSync('refreshToken')

        // 跳转到登录页
        uni.reLaunch({
          url: '/pages/login/login',
        })
        uni.showToast({
          title: '已退出登录',
          icon: 'success',
        })
      }
    },
  })
}

onMounted(async () => {
  await UserManager.ensureUserInfo()
})

onShow(() => {
  // 隐藏原生TabBar，显示自定义TabBar
  uni.hideTabBar({
    animation: false,
  })
})
</script>

<style lang="scss" scoped>
.profile-page {
  height: 100vh;
  background: #f7f8fa;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  // 顶部用户信息区域
  .header-section {
    background: linear-gradient(135deg, #1a3582 0%, #1890ff 100%);
    padding-bottom: 50rpx;
    position: relative;
    margin-bottom: 24rpx;

    // 装饰圆圈
    &::before,
    &::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
    }

    &::before {
      width: 300rpx;
      height: 300rpx;
      top: -100rpx;
      right: -80rpx;
    }

    &::after {
      width: 200rpx;
      height: 200rpx;
      bottom: 20rpx;
      left: -60rpx;
    }

    .user-profile {
      padding: 56px 32rpx 20rpx;
      display: flex;
      align-items: center;
      gap: 24rpx;
      position: relative;
      z-index: 2;

      .avatar-wrapper {
        width: 140rpx;
        height: 140rpx;
        border-radius: 70rpx;
        background: rgba(255, 255, 255, 0.25);
        border: 6rpx solid rgba(255, 255, 255, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);

        .avatar-text {
          font-size: 48rpx;
          font-weight: bold;
          color: white;
          text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
        }

        .avatar-badge {
          position: absolute;
          bottom: 0;
          right: 0;
          background: linear-gradient(135deg, #ffd700, #ffed4e);
          color: #8b4513;
          font-size: 20rpx;
          font-weight: bold;
          padding: 4rpx 12rpx;
          border-radius: 20rpx;
          border: 3rpx solid white;
        }
      }

      .user-detail {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 12rpx;

        .user-name {
          font-size: 44rpx;
          font-weight: bold;
          color: white;
          text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
        }

        .user-tags {
          display: flex;
          align-items: center;
          gap: 8rpx;

          .tag-item {
            font-size: 26rpx;
            color: rgba(255, 255, 255, 0.95);
          }

          .tag-dot {
            font-size: 24rpx;
            color: rgba(255, 255, 255, 0.6);
          }
        }
      }

      .settings-btn {
        width: 70rpx;
        height: 70rpx;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 35rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(10rpx);

        .settings-icon {
          font-size: 36rpx;
        }
      }
    }
  }

  // 功能菜单容器
  .menu-container {
    padding: 0 32rpx 40rpx;
    display: flex;
    flex-direction: column;
    overflow: auto;

    .menu-group {
      margin-bottom: 32rpx;

      .group-title {
        font-size: 28rpx;
        font-weight: bold;
        color: #303133;
        margin-bottom: 16rpx;
        padding-left: 20rpx;
        position: relative;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 8rpx;
          height: 28rpx;
          background: linear-gradient(to bottom, #4facfe, #00f2fe);
          border-radius: 4rpx;
        }
      }

      .menu-list {
        background: white;
        border-radius: 24rpx;
        overflow: hidden;
        box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.06);

        .menu-item {
          display: flex;
          align-items: center;
          padding: 32rpx 24rpx;
          border-bottom: 1rpx solid #f5f5f5;
          position: relative;

          &:last-child {
            border-bottom: none;
          }

          &:active {
            background: #f8f9fa;
          }

          .menu-icon {
            width: 88rpx;
            height: 88rpx;
            border-radius: 22rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 24rpx;

            &.send-icon {
              background: linear-gradient(135deg, #e3f2fd 0%, #90caf9 100%);
            }

            &.receive-icon {
              background: linear-gradient(135deg, #e8f5e9 0%, #81c784 100%);
            }

            &.todo-icon {
              background: linear-gradient(135deg, #fff3e0 0%, #ffb74d 100%);
            }

            &.password-icon {
              background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
            }

            &.help-icon {
              background: linear-gradient(135deg, #fd79a8 0%, #e84393 100%);
            }

            &.cache-icon {
              background: linear-gradient(135deg, #fab1a0 0%, #e17055 100%);
            }

            &.privacy-icon {
              background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%);
            }

            &.info-icon {
              background: linear-gradient(135deg, #92f0f5 0%, #4facfe 100%);
            }

            .icon-emoji {
              font-size: 40rpx;
            }
          }

          .menu-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 6rpx;

            .menu-title {
              font-size: 30rpx;
              font-weight: 600;
              color: #303133;
            }

            .menu-desc {
              font-size: 24rpx;
              color: #909399;
            }
          }

          .menu-arrow {
            font-size: 40rpx;
            color: #c0c4cc;
            font-weight: 300;
          }
        }
      }
    }

    .logout-container {
      margin-top: 48rpx;

      .logout-btn {
        background: white;
        border-radius: 24rpx;
        padding: 32rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16rpx;
        box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.06);

        &:active {
          background: #fef2f2;
        }

        .logout-icon {
          font-size: 36rpx;
        }

        .logout-text {
          font-size: 32rpx;
          font-weight: 600;
          color: #ef4444;
        }
      }
    }
  }

  // 底部版权
  .footer {
    text-align: center;
    padding: 40rpx 0 80rpx;
    display: flex;
    flex-direction: column;
    gap: 12rpx;

    .footer-text {
      font-size: 24rpx;
      color: #909399;
    }

    .footer-year {
      font-size: 22rpx;
      color: #c0c4cc;
    }
  }

  // 修改密码弹窗样式
  .password-popup-content {
    width: 600rpx;
    padding: 48rpx 40rpx 32rpx;
    background: white;
    border-radius: 20rpx;

    .popup-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #303133;
      text-align: center;
      margin-bottom: 32rpx;
    }

    .form-container {
      .form-item {
        margin-bottom: 32rpx;

        .form-label {
          display: block;
          font-size: 28rpx;
          color: #606266;
          margin-bottom: 12rpx;
        }

        .form-input {
          width: 100%;
          height: 88rpx;
          background: #f5f7fa;
          border: 2rpx solid #e4e7ed;
          border-radius: 12rpx;
          padding: 0 24rpx;
          font-size: 28rpx;
          color: #303133;

          &:focus {
            border-color: #1a3582;
            background: white;
          }
        }
      }
    }

    .popup-actions {
      display: flex;
      gap: 20rpx;
      margin-top: 32rpx;

      .action-btn {
        flex: 1;
        height: 88rpx;
        border-radius: 12rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30rpx;
        font-weight: 600;

        &.cancel {
          background: #f5f7fa;
          color: #606266;
          border: 2rpx solid #e4e7ed;
        }

        &.confirm {
          background: linear-gradient(135deg, #1a3582 0%, #1890ff 100%);
          color: white;

          &:active {
            opacity: 0.8;
          }
        }
      }
    }
  }

  // 帮助与反馈弹窗样式
  .help-popup-content {
    width: 640rpx;
    padding: 48rpx 40rpx 32rpx;
    background: white;
    border-radius: 20rpx;

    .popup-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #303133;
      text-align: center;
      margin-bottom: 32rpx;
    }

    .help-content {
      .help-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12rpx;
        margin-bottom: 32rpx;

        .section-icon {
          font-size: 80rpx;
        }

        .section-title {
          font-size: 28rpx;
          font-weight: 600;
          color: #606266;
        }
      }

      .contact-list {
        background: #f9fafb;
        border-radius: 12rpx;
        padding: 24rpx;
        margin-bottom: 24rpx;

        .contact-item {
          display: flex;
          flex-direction: column;
          gap: 12rpx;
          padding: 20rpx 0;
          border-bottom: 1rpx solid #e5e7eb;

          &:last-child {
            border-bottom: none;
            padding-bottom: 0;
          }

          &:first-child {
            padding-top: 0;
          }

          .contact-label {
            display: flex;
            align-items: center;
            gap: 8rpx;
            font-size: 24rpx;
            color: #909399;

            text {
              font-size: 24rpx;
            }
          }

          .contact-value {
            font-size: 30rpx;
            font-weight: 600;
            color: #1a3582;
          }

          .contact-value-wrapper {
            display: flex;
            flex-direction: column;
            gap: 16rpx;

            .contact-value {
              font-size: 36rpx;
              font-weight: bold;
              color: #10b981;
              letter-spacing: 2rpx;
            }

            .contact-actions {
              display: flex;
              gap: 16rpx;

              .action-btn-small {
                flex: 1;
                height: 72rpx;
                border-radius: 12rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8rpx;
                font-size: 26rpx;
                font-weight: 600;
                color: white;

                &.call {
                  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
                }

                &.copy {
                  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
                }

                &:active {
                  opacity: 0.8;
                }

                text {
                  font-size: 26rpx;
                }
              }
            }
          }
        }
      }

      .help-tips {
        background: #fffbeb;
        border: 2rpx solid #fde68a;
        border-radius: 12rpx;
        padding: 20rpx;

        .tips-text {
          font-size: 24rpx;
          line-height: 1.6;
          color: #92400e;
        }
      }
    }

    .popup-single-btn {
      width: 100%;
      height: 88rpx;
      background: linear-gradient(135deg, #fd79a8 0%, #e84393 100%);
      border-radius: 12rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30rpx;
      font-weight: 600;
      color: white;
      margin-top: 32rpx;

      &:active {
        opacity: 0.8;
      }
    }
  }

  // 隐私政策弹窗样式
  .privacy-popup-content {
    width: 640rpx;
    max-height: 80vh;
    padding: 48rpx 40rpx 32rpx;
    background: white;
    border-radius: 20rpx;
    display: flex;
    flex-direction: column;

    .popup-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #303133;
      text-align: center;
      margin-bottom: 24rpx;
    }

    .privacy-content {
      flex: 1;
      max-height: 500rpx;
      padding: 24rpx;
      background: #f9fafb;
      border-radius: 12rpx;
      margin-bottom: 24rpx;

      .privacy-text {
        font-size: 26rpx;
        line-height: 2;
        color: #606266;
        white-space: pre-wrap;
      }
    }

    .popup-single-btn {
      width: 100%;
      height: 88rpx;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 12rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30rpx;
      font-weight: 600;
      color: white;

      &:active {
        opacity: 0.8;
      }
    }
  }

  // 关于弹窗内容样式
  .about-popup-content {
    width: 600rpx;
    padding: 60rpx 40rpx 40rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20rpx;
    background: white;
    border-radius: 20rpx;

    .about-icon {
      font-size: 120rpx;
      margin-bottom: 12rpx;
    }

    .about-title {
      font-size: 40rpx;
      font-weight: bold;
      color: #303133;
    }

    .about-version {
      font-size: 28rpx;
      color: #909399;
      background: #f5f7fa;
      padding: 10rpx 28rpx;
      border-radius: 24rpx;
    }

    .about-divider {
      width: 160rpx;
      height: 2rpx;
      background: linear-gradient(to right, transparent, #e4e7ed, transparent);
      margin: 12rpx 0;
    }

    .about-company {
      font-size: 28rpx;
      color: #606266;
      font-weight: 500;
    }

    .about-copyright {
      font-size: 24rpx;
      color: #909399;
      margin-bottom: 24rpx;
    }

    .about-btn {
      width: 100%;
      background: linear-gradient(135deg, #92f0f5 0%, #4facfe 100%);
      border-radius: 24rpx;
      padding: 24rpx 0;
      margin-top: 16rpx;

      &:active {
        opacity: 0.8;
      }

      .btn-text {
        font-size: 32rpx;
        font-weight: 600;
        color: white;
      }
    }
  }
}
</style>
